<template>
  <div>
    <Add ref="add" @ok="search" v-if="nextFlowData.length != 0" :nextFlowData="nextFlowData" ></Add>
    <Update ref="update" @ok="search" v-if="nextFlowDataEdit.length != 0" :nextFlowData="nextFlowDataEdit"></Update>
    <Batch ref="batch" @ok="search"></Batch>
    <ZgAttach
      ref="attach"
      :showBtn="false"
      tableName="test"
      :attTypeArr="attTypeArr"></ZgAttach>
    <ZgSort
      ref="sort"
      :showBtn="false"
      @ok="handleSort"></ZgSort>
    <ZgDataImport
      ref="import"
      :showBtn="false"
      fileName="test.xlsx"
      url="/dict/import"
      @ok="search"></ZgDataImport>
    <FormConfig ref="FormConfig" @ok="search"></FormConfig>
    <SegmentConfig ref="SegmentConfig" @ok="search"></SegmentConfig>
    <ZgNewPage
      ref="page"
      title="所有机构流程采集流程列表页"
      addBtnName="新增采集"
      :scrollX="2000"
      :pageOpt="pageOpt"
      :batchBtns="batchBtns"
      :dataBtns="dataBtns"
      :conditions="conditions"
      :openCondition="true"
      :labelCol="9"
      @search="onSearch"
      @add="toAdd"
      @batch="toBatch"
      @admin="toAdmin"
      @condition="onCondition"
    >
      <template slot="columns">
        <a-table-column
          v-for="(column,i) in columns"
          :key="`column${i}`"
          :width="column.width"
          :title="column.label">
          <template slot-scope="record">
            <ZgDicHolder v-if="column.code==='isUse'" parentCode="flowIsConfig" :code="record[column.code]+''"></ZgDicHolder>
            <ZgDicHolder v-else-if="column.code==='canStart'" parentCode="flowIsConfig" :code="record[column.code]+''"></ZgDicHolder>
            <ZgDicHolder v-else-if="column.code==='type'" parentCode="flowTranType" :code="record[column.code]"></ZgDicHolder>
            <ZgDicHolder v-else-if="column.code==='state'" parentCode="flowState" :code="record[column.code]"></ZgDicHolder>
            <ZgDicHolder v-else-if="column.code==='category'" parentCode="flowCategory" :code="record[column.code]"></ZgDicHolder>
            <span v-else>{{ record[column.code] }}</span>
          </template>
        </a-table-column>
      </template>
      <template slot="thMode" slot-scope="scope">
        <a-row :gutter="10">
          <a-col :span="4" v-for="t in scope.list" :key="`thMode_${t.id}`">
            <a-card class="mb10">
              <div class="wfull h100 scroll">
                {{ t }}
              </div>
            </a-card>
          </a-col>
        </a-row>
      </template>
      <template slot="headerConfig">
        <HeaderConfig ref="headerConfig" @change="mergeHeader"></HeaderConfig>
      </template>
    </ZgNewPage>
    <UpLoadFile
      ref="upLoadFile"
      @ok="search"
      :showBtn="false"
      title="重新导入"
      :param="fileId"
      url="/zg-autoflow/autoFlow/main/saveOrUpdateAutoFlow"></UpLoadFile>
  </div>
</template>
<script>
import Add from './Add'
import Update from './Update'
import Batch from './Batch'
import HeaderConfig from './HeaderConfig'
import FormConfig from './FormConfig/FormConfig.vue'
import SegmentConfig from './SegmentConfig/SegmentConfig.vue'
import UpLoadFile from './UpLoadFile.vue'
export default {
  components: {
    Add, Update, Batch, HeaderConfig, FormConfig, SegmentConfig, UpLoadFile
  },
  data () {
    return {
      pageOpt: {
        showSearchBtn: false,
        showRefreshBtn: false,
        showConditionBtn: false,
        showHeaderConfig: false,
        showAttachBtn: false,
        showLayoutMode: false
      },
      columns: [
        { code: 'name', label: '流程名称', width: 120, isShow: true },
        { code: 'createTime', label: '实例最新创建时间', width: 120, isShow: true },
        { code: 'orgName', label: '归属单位', width: 120, isShow: true },
        { code: 'isUse', label: '是否启用', width: 120, isShow: true },
        { code: 'code', label: '流程CODE', width: 120, isShow: true },
        { code: 'type', label: '流程类型', width: 120, isShow: true },
        { code: 'state', label: '采集状态', width: 120, isShow: true },
        { code: 'nextFlowName', label: '后续流程', width: 120, isShow: true },
        { code: 'canStart', label: '是否可以直接启动', width: 120, isShow: true },
        { code: 'category', label: '流程分类', width: 120, isShow: true },
        { code: 'stepCount', label: '环节管理', width: 120, isShow: true }
      ],
      conditions: [
        { code: 'name', compType: '单行文本', label: '流程名称', defaultVal: '' },
        { code: 'code', compType: '单行文本', label: '流程CODE', defaultVal: '' },
        { code: 'nextFlowName', compType: '单行文本', label: '后续流程', defaultVal: '' },
        { code: 'orgName', compType: '单行文本', label: '归属单位', defaultVal: '' },
        { code: 'type', compType: '字典', label: '流程类型', defaultVal: '', extra: { 字典类型: 'flowTranType' } },
        { code: 'canStart', compType: '字典', label: '是否可以直接启动', defaultVal: '', extra: { 字典类型: 'flowIsConfig' } },
        // { code: 'canStart', compType: '字典', label: '是否为多段式流程', defaultVal: '不限', extra: { 字典类型: 'flowIsConfig' } },
        { code: 'isUse', compType: '字典', label: '是否启用', defaultVal: '', extra: { 字典类型: 'flowIsConfig' } },
        { code: 'createTime', compType: '日期区间', label: '创建时间', defaultVal: ['', ''] }
        // { code: 'createTime2', compType: '日期区间', label: '实例最新创建时间', defaultVal: ['', ''] }
      ],
      batchBtns: [
        { key: 1, label: '模板下载' },
        { key: 2, label: '模版导入' }

      ],
      dataBtns: [
        // { key: 1, name: '表单配置', icon: 'fa-cog', isShow: () => { return true } },
        { key: 2, name: '环节配置', icon: 'fa-gears', isShow: () => { return true } },
        // { key: 3, name: '控件配置', icon: 'fa-cog', isShow: () => { return true } },
        { key: 4, name: '重新导入', icon: 'fa-plus', isShow: () => { return true } },
        { key: 5, name: '导出', icon: 'fa-sign-out', isShow: () => { return true } },
        { key: 7, name: '编辑', icon: 'fa-edit', isShow: () => { return true } },
        { key: 6, name: '删除', icon: 'fa-trash', isShow: () => { return true } }
      ],
      attTypeArr: [
        { name: '附件1', type: '.png', limit: 10 },
        { name: '附件2', type: '.xlsx', limit: 10 }
      ],
      uniqueName: 'test',
      nextFlowData: [], // 后续流程数据 添加
      nextFlowDataEdit: [], // 后续流程数据 修改
      fileId: '' // 重新导入文件ID
    }
  },
  methods: {
    onImportOk () {
    },
    onCondition (param) {
      this.$http.post('/zg-autoflow/autoFlow/main/page', param, data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
        })
    },
    search () {
      this.$refs.page.search()
    },
    onSearch (param) {
       const diyHeaders = localStorage.getItem(this.currentUser.username + '_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
        this.$http.post('/zg-autoflow/autoFlow/main/page', param, data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
      })
    },
    toAdd () {
       // 新增采集
      this.$refs.add.open()
    },

    toBatch (opt) {
      if (opt.key === 1) {
        this.findConfig('流程模版链接', (res) => {
          const url = res.content
          location.href = url
        })
      } else if (opt.key === 2) {
        // 模版导入
        this.$refs.upLoadFile.open()
      }
    },
    toAdmin (param) {
      if (param.key === 1) {
        // 表单配置
        this.$refs.FormConfig.open()
      } else if (param.key === 2) {
        // 环节配置
        this.$refs.SegmentConfig.open(param)
      } else if (param.key === 3) {
        this.$refs.attach.open(param.obj)
      } else if (param.key === 4) {
        // 重新导入
        // alert('重新导入')
        this.fileId = param.obj.id
        this.$refs.upLoadFile.open()
      } else if (param.key === 5) {
        // 导出
         this.$http.download('/zg-autoflow/autoFlow/main/exportFlowExcel', { flowId: param.obj.id }, param.obj.name + '.xlsx')
      } else if (param.key === 6) {
        this.confirm(
        () => {
          this.$http.post('/zg-autoflow/autoFlow/main/del', [param.obj.id], () => {
            this.search()
          })
        },
        '确定要删除这条数据么')
      } else if (param.key === 7) {
        this.getNextFlowData({ code: param.obj.code }, param)
      }
    },
    handleSort (result) {
      alert(JSON.stringify(result.map(t => {
        return {
          id: t.id,
          sort: t.index
        }
      })))
    },
    mergeHeader (headers) {
      if (!headers) {
        return
      }
      this.columns = headers.filter(t => {
        return t.isShow
      }).sort((a, b) => {
        return a.sort - b.sort
      })
    },
    // 获取后续流程数据
    getNextFlowData (param, obj) {
      const that = this
      this.$http.post('/zg-autoflow/autoFlow/main/all', param, (res) => {
        res.forEach(t => {
          t.value = t.code
          t.label = t.name
       })
        // 拿到的后续流程数据
        if (param.code) {
          // 编辑
          that.nextFlowDataEdit = res
          that.$nextTick(() => {
            that.$refs.update.open(obj.obj)
          })
        } else {
          // 新增
          that.nextFlowData = res
        }
      })
    }
  },
  mounted () {
    this.getNextFlowData({ code: '' })
  }
}
</script>

<style lang="scss" scoped>
</style>
